<template>
  <div class="ef-node-form">
    <div class="ef-node-form-body">
      <el-form v-if="_type === 'node'" ref="dataForm" :model="node" label-width="80px">
        <el-form-item label="类型">
          <el-input v-model="node.type" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="node.name"></el-input>
        </el-form-item>
        <el-form-item label="left坐标">
          <el-input v-model="node.left" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="top坐标">
          <el-input v-model="node.top" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="node.icon"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="node.state" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in options.state" :key="item.state" :label="item.label" :value="item.state">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click.stop="$emit('update:visible', false)">取消</el-button>
          <el-button type="primary" size="mini" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>

      <el-form v-else-if="_type === 'line'" ref="dataForm" :model="line" label-width="80px">
        <el-form-item label="条件">
          <el-input v-model="line.label" placeholder="输入条件"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-close" size="mini" @click.stop="$emit('update:visible', false)">取消</el-button>
          <el-button type="primary" icon="el-icon-check" size="mini" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      node: null,
      line: null,
      options: {
        state: [
          {
            state: 'success',
            label: '成功'
          },
          {
            state: 'warning',
            label: '警告'
          },
          {
            state: 'error',
            label: '错误'
          },
          {
            state: 'running',
            label: '运行中'
          }
        ]
      }
    }
  },

  computed: {
    _type() {
      return this.node ? 'node' : this.line ? 'line' : ''
    }
  },

  methods: {
    setNode(data = {}) {
      this.node = {
        ...this.node,
        ...data
      }
    },

    setLine(data = {}) {
      this.line = {
        ...this.line,
        ...data
      }
    },

    // 修改连线
    saveLine() {
      this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
    },

    onSubmit() {
      if (this._type == 'node') {
        this.$emit('update:data', {
          ...this.data,
          nodeList: this.data.nodeList.map((v) => {
            if (v.id == this.node.id) {
              return {
                ...v,
                ...this.node
              }
            }
            return v
          })
        })
        this.$emit('repaintEverything')
      } else if (this._type == 'line') {
        this.$emit('update:data', {
          ...this.data,
          lineList: this.data.lineList.map((v) => {
            console.log(v, this.line)
            if (v.from == this.line.from && v.to == this.line.to) {
              return {
                ...v,
                ...this.line
              }
            }
            return v
          })
        })
        this.$emit('updateJsPlumbLine', this.line)
      }
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.ef-node-form {
  padding-right: 20px;
}
</style>
